<template>
    <div>
        <label>123</label>
        <van-tabbar v-model="active" @click="onChange">
            <van-tabbar-item info="3">
                <image slot="icon" :src="icon.normal" mode="aspectFit" style="width: 30px; height: 18px;" />
                <image slot="icon-active" :src="icon.active" mode="aspectFit" style="width: 30px; height: 18px;" />
                自定义
            </van-tabbar-item>
            <van-tabbar-item icon="search">标签</van-tabbar-item>
            <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
        </van-tabbar>

    </div>
</template>
  
<script>

export default {
    name: 'Tabbar',
    components: {

    },
    data() {
        active = 0
        icon = {
            normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
            active: 'https://img.yzcdn.cn/vant/user-active.png',
        }
        return {
            active,
            icon,
        }
    },
    methods: {
        onChange(event) {
            this.setData({ active: event.detail });
        },
    }
}
</script>
  
<style lang="less"></style>
  